<template>
	<div class="headerContent">
		<div class="headerwidth">
			<div class="navLogo">
				<span class="logo" @click="$router.push('/homework')"><img src="../../assets/image/school/logo.png" alt="百师云"></span>
			</div>
			<div class="headerPeople">
				<ul>
					<li @click="$router.push('/messagecenter')"><img src="../../assets/image/school/notice.jpg" alt=""></li>
					<!-- <li @click="$router.push('/downloadcenter')"><img src="../../assets/image/school/download.jpg" alt=""></li> -->
				</ul> 
				<div>
					<span v-if="countToken=={}" @click="login">登录</span>
					<div v-else class="userInfo">
						<b><img src="../../assets/image/school/header.png"></b>
						<div class="headercontent">
							<span>{{countToken.name}}</span> 
							<!-- <span @click="$router.push('/personalinfor')">账号信息</span>
							<span @click="$router.push('/accountinfo')">账号安全</span> -->
							<span class="tuichu" @click="quite">退出登录</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		 
	</div>
</template>

<script>
	import { decrypt } from "../../utils/cryptojs";
	import {get,post,del,dele} from '../../request/api.js'
	export default{
		data(){
			return{
				countToken:{}
			}
		},
		mounted() {
			const alaynisData = decrypt(localStorage.getItem("accessToken"));
			this.countToken = JSON.parse(alaynisData)
			this.role()
		},
		methods:{
			// 获取所有的教师角色
			role(){
				get('/teacher/teacherrole').then(res=>{
				    //console.info(res)
				})
			},
			isActive(...routes) {
			    // 如果传入的是一个路径数组，检查当前路径是否在数组中
			    if (Array.isArray(routes[0])) {
			      return routes[0].some(route => this.$route.path.startsWith(route));
			    }
			    // 如果传入的是单个路径，直接检查是否匹配
			    return routes.some(route => this.$route.path.startsWith(route));
			  },
			login(){
				// this.$router.push('/login')
				window.location.href = this.$loginUrl + '?type=133'
			},
			quite(){
				get('/auth/loginout')
				.then(res=>{
					localStorage.removeItem('accessToken')
					window.location.href = this.$loginUrl
				})
			}
		}
	}
</script>

<style scoped>
.headerwidth{
	width:1440px;
	margin:0 auto;
	;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	.logo{
		cursor: pointer;
	}
	.headerContent{
		min-width: 1200px;
		width:1440px;
		margin:0 auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		display: flex;
		justify-content: space-between;
		padding:0 40px;
		align-items: center;
	}
	.navLogo{
		display: flex;
		justify-content: left;
		align-items: center; 
	}
	.navLogo img{
		 width:130px;
	}
	.navLogo div{
		padding-left:20px;
		display: flex;
		align-items: center;
	}
	.navLogo div a{
		display: block;
		color:#557292;
		font-size:16px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.navLogo div a::before{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.navLogo div a:last-child::before{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.navLogo div a:hover,.navLogo div a.hover{
		color:#295CFF;
	}
	.navLogo div a:hover::after,.navLogo div a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.headerPeople{
		display: flex;
		align-items: center;
	}
	.headerPeople ul{
		display: flex;
		align-items: center;
	}
	.headerContent ul li{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 2px solid #D8E4F0;
		border-radius:100px;
		cursor: pointer;
		margin-left:14px;
	}
	
	/* .headerContent ul li img{
	}
	.headerContent ul li:last-child img{
		width:100%;
		height:auto;
		border-radius:200px;
	} */
	.userInfo{
		display: flex;
		align-items: center;
		font-size:16px;
		color:#5677FB;
		position:relative;
		height:52px;
	}
	.userInfo b{
		display: block;
		width: 36px;
		height: 36px;
		border: 2px solid #D8E4F0;
		border-radius:100px;
		cursor: pointer;
		margin-left:14px;
		text-align: center;
	}
	.userInfo b img{
		padding-top:2px;
		width:28px;
	}
	.headerboxImage{
		border-radius:100px;
	}
	.headercontent{
		box-sizing: border-box;
		position: absolute;
		left:32%;
		top:52px;
		width:140px;
		text-align: left;
		border-radius:6px;
		z-index:15;
		display: none;
		transform: translateX(-50%);
		background:rgb(253, 253, 254);
		box-shadow: 0 4px 16px 0 rgba(85, 114, 146, 0.3);
		border-radius: 10px;
	}
	.headercontent img{
		display: block;
		margin:0 auto 10px;
	}
	.headercontent span{
		display: block;
		line-height:36px;
		color:#333;
		cursor: pointer;
		padding:0px 20px;
	}
	.headercontent span:hover,.headercontent span.hover{
		background:rgb(244, 247, 253);
        color:#295CFF   
	}
	.headercontent span:first-child:hover,.headercontent span:first-child.hover{
		border-radius:6px 6px 0 0
	}
	.headercontent span:last-child:hover,.headercontent span:last-child.hover{
		border-radius:0px 0px 6px 6px;
	}
	.headercontent span.tuichu{
		color:rgb(236, 85, 90)
	}
	.jiantou{
		display: inline-block;
		margin-left:8px;
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #5677FB; /* 蓝色三角箭头 */
	}
	.userInfo i{
		font-style:normal;
		cursor: pointer;
		color:rgb(236, 85, 90)
	}
	.userInfo:hover .jiantou{
		 transform: rotate(180deg);
	}
	.userInfo:hover .headercontent{
		display: block;
	}
</style>